<template>
  <el-row :gutter="4" justify="start" style="min-width: 1366px; overflow: auto">
    <el-col :span="4"
      ><el-input v-model="searchText" size="default" placeholder="套餐名称"
    /></el-col>
    <el-col :span="2"
      ><el-button type="primary" @click="methods.requestData"
        >查找套餐</el-button
      ></el-col
    >
    <el-col :offset="0" :span="2"
      ><el-button type="primary" @click="methods.handleAddSeatMeal"
        >添加套餐</el-button
      ></el-col
    >
  </el-row>
  <el-table :data="pageData.data.records" style="width: 100%">
    <el-table-column label="套餐名称" prop="name" />
    <el-table-column label="图片" prop="image">
      <template #default="scope">
        <el-image
          style="width: 100px; height: 100px"
          :src="methods.getImageUrl(scope.row.image)"
          fit="fill"
        />
      </template>
    </el-table-column>

    <el-table-column align="left" label="菜品分类" prop="categoryName">
      <template #default="scope">
        <el-tag v-if="scope.row.type === 1">菜品</el-tag>
        <el-tag v-if="scope.row.type === 2" type="success">套餐</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="售价" prop="price" />

    <el-table-column label="售卖状态" prop="status">
      <template #default="scope">
        <el-tag v-if="scope.row.status === 1" type="success">在售</el-tag>
        <el-tag v-if="scope.row.status === 0" type="warning">停售</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="最后操作时间" prop="updateTime">
      <template #default="scope">
        {{ methods.convertDate(scope.row.updateTime) }}
      </template>
    </el-table-column>

    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button
          size="small"
          type="primary"
          @click="methods.handleEdit(scope.$index, scope.row.id)"
          >编辑</el-button
        >

        <el-button
          v-if="scope.row.status === 1"
          size="small"
          type="warning"
          @click="methods.handleUpdateState(scope.row.id, 0)"
          >禁用</el-button
        >
        <el-button
          v-if="scope.row.status === 0"
          size="small"
          type="success"
          @click="methods.handleUpdateState(scope.row.id, 1)"
          >启用</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="methods.handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-row :gutter="20">
    <el-col :span="12" :offset="6">
      <div class="pagination-block">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :page-size="10"
          :total="totalCount"
          :current-page="currentPage"
          @current-change="methods.handlePageIndexChange"
        />
      </div>
    </el-col>
  </el-row>

  <el-dialog v-model="dialogFormVisible" :title="dialogTitle" style="width: 800px">
    <setmeal-edit @fatherFun='methods.getEditComponentState' ref="setmealEditComponent" :isEditMode="editComponentEditMode"></setmeal-edit>
    <template #footer> </template>
  </el-dialog>

</template>

<script lang="ts">

import {
  SetmealListReqForm,
  SetmealListResForm,
  SetmealListResListenObject,
  SetmealSingleReqForm,
} from "@/entity/entityDefine";
import { defineComponent, nextTick, reactive, ref } from "vue";
import { dayjs } from "element-plus";
import {setmealById, setmealList} from "@/api/SetmealManage"
import SetmealEdit from "@/components/SetmealEdit.vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  
  name: "SetmealManage",
  components: {SetmealEdit},
  mounted() {
    console.log("mounted");
    // 拉取数据
    this.methods.requestData();
  },
  setup() {

    let editComponentEditMode = ref(false);
    // 绑定组件
    let setmealEditComponent = ref();

    // table 数据展示及分页数据
    let searchText = ref("");
    var currentPage = ref(1);
    let totalCount = ref(0);
    let pageSize = ref(10);

    // 列表请求入参
    let params: SetmealListReqForm = {
      page: 1,
      pageSize: 10,
      name: "",
    };
    // 列表返回结果
    let respData: SetmealListResForm = reactive({
      records: [],
      total: 0,
      size: 0,
      current: 0,
      pages: 0,
      searchCount: 0,
    });
    // 列表返回结果包装器
    let pageData: SetmealListResListenObject = reactive({
      data: respData,
    });

    // 添加套餐窗口
    let dialogFormVisible = ref(false);
    let dialogTitle = ref("")

    const methods = {
      // 请求列表数据 异步
      async requestData() {
        params.name = searchText.value;
        if (searchText.value === "") {
          params.name = undefined;
        }
        params.page = currentPage.value;
        params.pageSize = pageSize.value;
        const { code, msg, data } = await setmealList(params);
        // 返回结果处理
        if (code == 200) {
          let res = data!;
          pageData.data = res;
          totalCount.value = res.total;
          console.log(respData);
          console.log(totalCount);
        } else {
          // 网络层已提示信息
          // console.log(msg);
        }
      },
      // 处理分页点击
      handlePageIndexChange(pageIndex: number) {
        currentPage.value = pageIndex;
        methods.requestData();
      },

      // 处理添加套餐
      handleAddSeatMeal() {
        //
        dialogTitle.value = "添加套餐";
        dialogFormVisible.value = true;
        editComponentEditMode.value = false;
        nextTick(()=>{
          setmealEditComponent.value.methods.resetState();
        });
      },
      // 处理修改套餐 状态
      handleUpdateState(id: string, status: number) {
        //
        ElMessage.info("功能预留,未实现")
      },
      // 处理修改套餐
      handleEdit(inex: any, setmealId: string) {
        //
        dialogTitle.value = "修改套餐";
        dialogFormVisible.value = true;
        editComponentEditMode.value = true;
        nextTick(() => { // 首次加载时 元素还未渲染 会报错 fix => 加上nextTick 渲染后调用方法
          setmealEditComponent.value.methods.setEditId(setmealId);
        });
      },
      // 处理套餐删除
      handleDelete(inex: any, row: any) {
        //
        ElMessage.info("功能预留,未实现")
      },
      // 日期转换操作
      convertDate(date: string) {
        let format = dayjs(date).format("YYYY年MM月DD日 HH:mm:ss");
        return format;
      },
      // 图片地址转换
      getImageUrl(url: string) {
        // /api/为本地代理 转发使用前缀.
        return "/api/common/download?fileName=" + url;
      },

      getEditComponentState(state: boolean) {
        // 
        dialogFormVisible.value = false;
        methods.requestData();
      }
      
    };

    return {
      // 分页数据 - 列表请求
      searchText,
      currentPage,
      totalCount,
      pageSize,
      // 列表数据 用于展示
      pageData,
      // 方法
      methods,
      // 添加套餐窗口
      dialogFormVisible,
      dialogTitle,
      setmealEditComponent,
      editComponentEditMode
    };
  },
});

</script>
